<script setup>
import { Document, Delete } from '@element-plus/icons-vue'
import { computed } from 'vue'
import { FILE_STATUS, PARSE_STATUS } from '@/api/file'

const props = defineProps({
  fileName: {
    type: String,
    required: true
  },
  status: {
    type: String,
    validator(value) {
      return Object.values(FILE_STATUS).includes(value)
    },
    default: FILE_STATUS.StatusProcessing
  },
  parseStatus: {
    type: String,
    validator(value) {
      return Object.values(PARSE_STATUS).includes(value)
    },
    required: false
  }
})

const emit = defineEmits(['delete'])

const statusMap = Object.freeze({
    [FILE_STATUS.StatusStarting]: {
        text: '准备开始',
        type: 'info'
    },
    [FILE_STATUS.StatusProcessing]: {
        text: '上传中', 
        type: 'warning'
    },
    [FILE_STATUS.StatusUploaded]: {
        text: '上传成功',
        type: 'success'
    },
    [FILE_STATUS.StatusFailed]: {
        text: '上传失败',
        type: 'danger'
    },
    [FILE_STATUS.StatusDeleteFailed]: {
        text: '删除失败',
        type: 'danger'
    },
    [FILE_STATUS.StatusDeleted]: {
        text: '已删除',
        type: 'info'
    }
})
const statusText = computed(() => statusMap[props.status].text)
const statusType = computed(() => statusMap[props.status].type)

const parseStatusMap = Object.freeze({
    [PARSE_STATUS.ParsePending]: {
        text: '待解析',
        type: 'info'
    },
    [PARSE_STATUS.ParseProcessing]: {
        text: '解析中', 
        type: 'warning'
    },
    [PARSE_STATUS.ParseSuccess]: {
        text: '解析完成',
        type: 'success'
    },
    [PARSE_STATUS.ParseFailed]: {
        text: '解析失败',
        type: 'danger'
    }
})
const parseStatusText = computed(() => parseStatusMap[props.parseStatus]?.text || '未知状态')
const parseStatusType = computed(() => parseStatusMap[props.parseStatus]?.type || 'info')

const handleDelete = () => {
  emit('delete')
}
</script>

<template>
  <el-card class="pdf-card" shadow="hover">
    <div class="card-content">
      <div class="file-info">
        <el-icon class="file-icon"><Document /></el-icon>
        <div>
          <el-tooltip 
            :content="fileName" 
            placement="top-start"
            effect="light"
            popper-class="file-name-tooltip"
          >
            <div class="file-name">{{ fileName }}</div>
          </el-tooltip>
          <el-tag 
            :type="statusType" 
            size="small"
            effect="light"
            class="status-tag"
          >
            {{ statusText }}
          </el-tag>
          <el-tag
            v-if="status == FILE_STATUS.StatusUploaded && parseStatus"
            :type="parseStatusType" 
            size="small"
            effect="light"
            class="status-tag"
          >
            {{ parseStatusText }}
          </el-tag>
        </div>
      </div>
      <el-tooltip content="删除文件" placement="top">
        <el-button 
          class="delete-btn" 
          type="danger" 
          :icon="Delete" 
          circle 
          plain
          @click="handleDelete"
        />
      </el-tooltip>
    </div>
  </el-card>
</template>

<style scoped>
.pdf-card {
  width: 100%;
  height: fit-content;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon {
  font-size: 28px;
  color: #409eff;
}

.file-name {
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.status-tag {
  margin-left: 0 !important;
  margin-right: 10px;
}

.delete-btn {
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background-color: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
  cursor: pointer;
  transform: scale(1.1);
}

.file-name-tooltip {
  max-width: 300px;
  word-break: break-all;
}
</style>